<template>
  <view class="container">
    <view class="main-title">
      <view class="main-title-text">记录宝宝一点一滴</view>
    </view>

    <view class="function-area">
      <view class="function-item" @tap="goToHeight">
        <image src="../../static/add/add-circle-half-dot.png" mode="aspectFit"></image>
        <text>身高体重</text>
      </view>
      <view class="function-item" @tap="goToDiary">
        <image src="../../static/add/add-square.png" mode="aspectFit"></image>
        <text>宝宝日记</text>
      </view>
    </view>
    
    <view class="close-icon" @click="handleClose">
      <uni-icons type="closeempty" size="30" color="#999" ></uni-icons>
    </view>
  </view>
</template>

<script setup>

const goToHeight = () => {
	uni.redirectTo({
		url: '/pages/baby/add_record/add_record'
	})
}

const goToDiary = () => {
	uni.redirectTo({
		url: '/pages/baby_diary/add_diary/add_diary'
	})
}

const handleClose = () => {
	uni.navigateBack({
		url: '/pages/home/home'
	})
}
</script>

<style scoped>
.container {
	padding: 100rpx 30rpx;
	
}

.main-title {
	margin-top: 260rpx;
	text-align: center;
}

.main-title text {
	font-size: 36rpx;
	color: #333;
}

.main-title-text{
	font-size: 40rpx;
}

.function-area {
	margin-top: 180rpx;
	display: flex;
	justify-content: space-around;
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.function-item image {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
	border-radius: 50rpx;
}

.function-item text {
	font-size: 28rpx;
	color: #333;
}

.close-icon {
	margin-top: 240rpx;
	display: flex;
	justify-content: center;
}
</style>